<template>
    <div class="hotShowing">
        <hot-show-item :itemList='hotMvList'></hot-show-item>
        <div class="load-more" v-show = 'isLoading'>
            <com-loading></com-loading>
        </div>
    </div>
</template>

<script>
import hotShowItem from './hotShowItem.vue'
import comLoading from '@/components/comLoading.vue'
export default {
    name: 'hotShowing',
    props: {
        hotMvList : Array,
        isLoading: Boolean,
        hotIdList : Array,
        add_mv_item: Function,
        fristInit: Function,
    },
    data() {
        return {

        };
    },
    components: {
        hotShowItem,
        comLoading
    },
    methods: {
        // 滑动到底部逻辑，添加热门电影的数量
        add_mv_list() {
            // 正在加载 和 全部数据已加载完成 这两种情况直接退出
            if(this.isLoading || this.hotMvList.length >= this.hotIdList.length) {
                return;
            }
            var start = this.hotMvList.length;
            var end =   this.hotMvList.length + 7 <= this.hotIdList.length ? 
                        this.hotMvList.length + 7 : this.hotIdList.length;
            var newLoad = this.hotIdList.slice(start,end);
            // console.log('newLoad',newLoad);
            // console.log('start',start);
            // console.log('end',end);
            // 开始请求新的数据
            // if(newLoad.length > 0){
                this.add_mv_item(newLoad.join(','));
            // }
        },
        myOnScroll() {
            //变量scrollTop是滚动条滚动时,距离顶部的距离
            let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            if( scrollHeight - (scrollTop+windowHeight) < 200 ){
                //写后台加载数据的函数
                this.add_mv_list();
                // console.log('gogo');
            }
        },
        // 初始化我的轮动事件
        myInitScroll() {
            window.addEventListener('scroll',this.myOnScroll);
        },
    },
    mounted() {
        this.myInitScroll();
        this.fristInit();
    },
    destroyed() {
        window.removeEventListener('scroll',this.myOnScroll);
    }
}
</script>

<style lang="scss" scoped>
.load-more {
    height: 100px;
}
</style>